iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
Modern Web

CSS大全閱讀筆記系列 第 29 篇

第五章:字型(11)

  • 分享至 

  • xImage
  •  
  1. 字型合成:
    a.當字型缺少粗體或斜體時,使用者代理可能會自行從現有字型計算出接近的字貌使用,但或許字貌會不太自然,font-synthesis可以控制控制這類字貌的運用與否與運用多寡,預設值為weight style,會作用於所有元素,可繼承親代元素的值。
    b. font-synthesis的設定值:
    - weight style:需要時使用者代理可自行計算出粗體和斜體使用。
    - weight:需要時使用者代理可自行計算出粗體使用。
    - style:需要時使用者代理可自行計算出斜體使用。
    - none:使用者代理不可自行計算出任何粗體或斜體使用。
    c. 使用font-synthesis時注意支援度,至今為止只有Firefox和Safari(桌機和手機版)支援。
  2. 字型屬性:
    a. font是font-style、font-variant、font-weight、font-stretch、font-size、line-height和font-family的縮寫,前面所列的屬性都可以寫成一個font的宣告,所以h1 {font-family: Verdana, san-serif; font-size: 30px; font-weight: 900; font-style: italic;}會等同於h1 {font: 900 italic 30px Verdana, san-serif;}。
    b. font中設定的初始值會依照個縮寫屬性的初始值而定,且會繼承親代元素。其中比較特殊的是line-height,line-height設定單位基準是以元素本身的font-size計算,而非親代元素。
    b. font宣告時的注意事項:
    -各設定值間以半形空白區隔。
    - 一定要設定font-size和font-family,不可省略。
    - 除了font-size和font-family之外,其他屬性設定值為normal時,可以省略。
    - font-style、font-variant和font-weight必須在font-size之前。
    - font-variant只能指定normal或small-caps(即CSS2.1中定義的值)。
    - font-stretch只能使用關鍵字,不可使用百分比。
    - line-height並非字型屬性,但仍可以在font中使用,使用時必須緊鄰font-size之後,並以半形斜線(/)分隔,寫作font-size/line-height,例如20px/3或是150%/2.5。
    - font-family必須放在最尾端,是指定的最後一個值。
    - 符合前列數點的前提下,屬性順序可以隨意排列。
    - font屬性宣告時,會將所有包含在font內可設定的屬性值全部回歸為預設值,所以要更改其中幾項的設定值時,可以考慮使用單獨屬性,如font-weight: 900;。
    - 在font縮寫時,IE和Edge不支援使用font-stretch,建議單獨寫。

(字型屬性未完)


上一篇
第五章:字型(10)
下一篇
第五章:字型(12)
系列文
CSS大全閱讀筆記 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言